<template>
  <div class="wrapper">
    <div class="shop-record">
      <div class="content">
        <div class="left">
          <image :src="content.shopLogo"></image>
        </div>
        <div class="right">
          <div class="top">
            <span class="name">商品名称: {{ content.shopName }}</span>
            <span>应付: {{ content.amount }}元</span>
          </div>
          <div class="order">订单号: {{ content.id }}</div>
          <div class="time">时间: {{ content.createTime }}</div>
          <div class="time">物流号: {{ content.deliverNum || '无' }}</div>
          <div class="time">物流公司: {{ content.deliverCompany || '无' }}</div>
          <div class="remark">备注: {{ content.remark }}</div>
        </div>
      </div>
      <div class="info">
        <div class="discount">
          <p v-for="item of content.coupons" :key="item.id">
            -{{ item.disValue }}元
          </p>
        </div>
        <p class="paid-in">实付: {{ content.payAmount }}元</p>
        <div class="btn">
          <span>在线咨询</span>
          <span>申请售后</span>
        </div>
      </div>
    </div>
    <div class="order-detail">
      <div class="tips">订单详情</div>
      <div class="order-content">
        <div
          class="order-item"
          v-for="item of content.coupons"
          :key="item.code"
        >
          <div class="name txt">
            <span>优惠券</span>
            <span>抵用金额{{ item.disValue }}元</span>
          </div>
          <div class="order-num txt">
            <span>{{ item.code }}</span>
            <span>{{ item.couponName }}</span>
          </div>
          <div class="status txt">已使用</div>
          <u-line color="#ccc" border-style="dashed" margin="10rpx 0"></u-line>
          <div class="rules txt">
            <span>使用规则</span>
            <span>去使用</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  onLoad(e) {
    this.content = JSON.parse(e.content)
    console.log(this.content)
  },
  data() {
    return {
      content: {}
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  background: #f3efec;
  .shop-record {
    background: #fff;
    padding: 20px 10px;
    .content {
      display: flex;
      align-items: center;
      height: 100px;
      color: rgb(157, 155, 155);
      font-size: 26rpx;

      .left {
        image {
          width: 100px;
          height: 100px;
        }
      }
      .right {
        flex: 1;
        .top {
          display: flex;
          justify-content: space-between;
          color: #000;
          font-size: 30rpx;
          margin-bottom: 10rpx;
          .name {
            font-weight: 700;
          }
        }
      }
    }
    .info {
      text-align: right;
      .paid-in {
        font-weight: 600;
        margin: 10px 0;
      }
      .btn {
        margin-top: 30px;
        color: rgb(157, 155, 155);
        font-size: 26rpx;
        span {
          padding: 5px;
          border-radius: 10px;
          border: 1px solid rgb(189, 185, 185);
          margin: 0 6px;
        }
      }
    }
  }
  .order-detail {
    margin-top: 20px;
    background: #fff;
    padding: 20px 10px;
    .tips {
    }
    .order-content {
      margin-top: 20px;
      .order-item {
        background: #f5f2f0;
        padding: 10px;
        border-radius: 10px;
        font-size: 24rpx;
        color: rgb(157, 155, 155);
        .name {
          font-size: 30rpx;
          color: #000;
        }
        .num {
          margin: 20rpx 0;
        }
        .status {
        }
        .rules {
        }
      }
    }
    .txt {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
